<!-- 产品页 加密货币组件 -->
<template>
  <div class="iconList">
    <div class="iconWrapper" v-for="(item, index) in CryptocurrencyList" :key="index">
     <img class="icon" :src="item.img" :alt="item.name">
      <p class="iconText"> {{ item.name }} </p>
    </div>
  </div>
</template>
<script setup>
import {reactive} from 'vue';
import img1 from "@/assets/proIcons/1.png";
import img2 from "@/assets/proIcons/2.png";
import img3 from "@/assets/proIcons/3.png";
import img4 from "@/assets/proIcons/4.png";
import img5 from "@/assets/proIcons/5.png";
import img6 from "@/assets/proIcons/6.png";
import img7 from "@/assets/proIcons/7.png";
import img8 from "@/assets/proIcons/8.png";
import img9 from "@/assets/proIcons/9.png";
import img10 from "@/assets/proIcons/10.png";
import img11 from "@/assets/proIcons/11.png";
import img12 from "@/assets/proIcons/12.png";
import img13 from "@/assets/proIcons/13.png";
import img14 from "@/assets/proIcons/14.png";
import img15 from "@/assets/proIcons/15.png";
import img16 from "@/assets/proIcons/16.png";
import img17 from "@/assets/proIcons/17.png";
import img18 from "@/assets/proIcons/18.png";
import img19 from "@/assets/proIcons/19.png";
import img20 from "@/assets/proIcons/20.png";
const CryptocurrencyList = reactive([
  {id: 1,  name: 'ETH', img: img1 },
  {id: 2,  name: 'BSC-USD', img: img2 },
  {id: 3,  name: 'WBNB', img: img3 },
  {id: 4,  name: 'USDC', img: img4 },
  {id: 5,  name: 'anyUSDC', img: img5 },
  {id: 6,  name: 'XRP', img: img6 },
  {id: 7,  name: 'DOGE', img: img7 },
  {id: 8,  name: 'TONCOIN', img: img8 },
  {id: 9,  name: 'ADA', img: img9 },
  {id: 10,  name: 'AVAX', img: img10},
  {id: 11,  name: 'SHIB', img: img11},
  {id: 12,  name: 'DOT', img: img12},
  {id: 13,  name: 'TRX', img: img13},
  {id: 14,  name: 'BCH', img: img14},
  {id: 15,  name: 'LINK', img: img15},
  {id: 16,  name: 'NEAR', img: img16},
  {id: 17,  name: 'MATIC', img: img17},
  {id: 18,  name: 'LTC', img: img18},
  {id: 19,  name: 'UNI', img: img19},
  {id: 20,  name: 'PEPE', img: img20},
]);

</script>

<style lang="less" scoped>
.iconList {
  display: flex;
  flex-wrap: wrap;

  .iconWrapper {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.125rem;
    margin-right: 0.125rem;
    font-size: 0.14rem;
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    .icon {
      width: 0.35rem;
      height: 0.35rem;
    }

  }

  .iconWrapper:hover {
    background: #f7f7f7;
    border-radius: 10px;
    color: black;
  }

}

/* h5 适配样式：当视口宽度小于 600px 时 */
@media (max-width: 600px) {
  .iconList {
    display: flex;
    flex-wrap: wrap;

    .iconWrapper {
      width: 25%;
      height: 1rem;
      margin-left: 0;
      margin-right: 0;
      font-size: 0.14rem;
      color: #fff;

      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      .icon {
        width: 0.35rem;
        height: 0.35rem;
      }

    }

    .iconWrapper:hover {
      background: #f7f7f7;
      border-radius: 10px;
      color: black;
    }

  }
}
</style>
